<script setup>
import router from "../../../router/index.js";
import SideBarLogo from "./SideBarLogo.vue";
import VMenu from "./VMenu.vue";
import store from "../../../store/index.js";

const handleMenuClick = (name) => {
  // 更新面包屑导航信息、更新默认激活菜单名称
  store.commit('sidebar/UPDATE_BREAD_CRUMB_LIST', name);
  // 路由跳转
  router.push({name});
};
</script>

<template>
  <div class="v-aside-container">
    <!-- 左侧菜单栏 Logo 区域 -->
    <side-bar-logo/>
    <!--  菜单显示区域  -->
    <el-menu @select="handleMenuClick" style="border-right: unset;"
             :collapse="store.getters.isCollapsed" :collapse-transition="false"
             :default-active="store.getters.defaultActiveMenuName"
             unique-opened
             class="v-menu-container">
      <v-menu :menuData="store.getters.menuList"></v-menu>
    </el-menu>
  </div>
</template>

<style scoped>
.v-menu-container {
  height: calc(100vh - 50px);
  overflow-x: hidden;
  overflow-y: auto;
  border-right: unset;
  /*添加过渡效果*/
  transition: all 0.5s ease;
  background-color: var(--v-sidebar-bg-color);
}
</style>